<template>
  <view class="nursing-daily-container">
    <view class="section-title">{{ clientName }}的订餐日历</view>
    <view class="calendar-table">
      <view class="table-header">
        <view class="table-cell">星期/餐次</view>
        <view class="table-cell" v-for="meal in meals" :key="meal">{{
          meal
        }}</view>
      </view>

      <view v-for="day in weekdays" :key="day" class="table-row">
        <view class="table-cell meal-name">{{ day }}</view>
        <view v-for="meal in meals" :key="meal" class="table-cell">
          <view v-if="mealMap[day] && mealMap[day][meal]">
            <view
              v-for="item in mealMap[day][meal]"
              :key="item.mealitemId"
              class="meal-item"
            >
              {{ item.name }}
            </view>
          </view>
          <view v-else class="empty-cell">-</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      clientId: null,
      clientName: "",
      weekdays: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      meals: ["早餐", "午餐", "晚餐"],
      mealMap: {}, // mealMap[day][meal] = [mealitem...]
    };
  },
  onLoad(options) {
    this.clientId = options.clientId;
    this.clientName = options.clientName || "客户";
    this.fetchMealData();
  },
  onPullDownRefresh() {
    this.fetchMealData();
    uni.stopPullDownRefresh();
  },
  methods: {
    fetchMealData() {
      uni.request({
        url: "http://localhost:9000/mealpick/pageClientAndScheduleAndItem",
        method: "GET",
        data: {
          clientId: this.clientId,
          cur: 1,
          number: 1000,
        },
        success: (res) => {
          if (res.data.status === 200) {
            const data = res.data.data || [];
            const map = {};

            data.forEach((entry) => {
              const day = entry.mealSchedule.day;
              const meal = entry.mealSchedule.meal;
              const item = entry.mealitem;

              if (!map[day]) map[day] = {};
              if (!map[day][meal]) map[day][meal] = [];
              map[day][meal].push(item);
            });

            this.mealMap = map;
          } else {
            uni.showToast({ title: "加载失败", icon: "none" });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.nursing-daily-container {
  padding: 20rpx;
  background-color: #fffbe6;
  min-height: 100vh;
}

.section-title {
  font-size: 27.2px;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #fa541c;
}

.calendar-table {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
}

.table-header,
.table-row {
  display: flex;
}

.table-cell {
  flex: 1;
  padding: 20rpx;
  border-right: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  text-align: center;
  font-size: 26rpx;
  color: #333;
}

.table-cell:last-child {
  border-right: none;
}

.table-header {
  background-color: #f9fafc;
  font-weight: bold;
}

.meal-name {
  background-color: #f9fafc;
  font-weight: bold;
}

.meal-item {
  margin-bottom: 6rpx;
  color: #409eff;
  font-size: 25rpx;
}

.empty-cell {
  color: #ccc;
}
</style>
